cody - HTMLify profile
cody
4270 Files
632542 Views
Latest files of /cody/solygambas/html-css-javascript-projects/053-touch slider
style.css
cody/solygambas/html-css-javascript-projects/053-touch slider/style.css
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
touch slider
cody/solygambas/html-css-javascript-projects/053-touch slider/index.html
<!-- Based on Build a Touch Slider with HTML, CSS & JavaScript by Brad Traversy (2021)
see: https://www.youtube.com/watch?v=5bxFSOA5JYo
original idea by Will Adams: https://github.com/bushblade/Full-Screen-Touch-Slider -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
see: https://www.youtube.com/watch?v=5bxFSOA5JYo
original idea by Will Adams: https://github.com/bushblade/Full-Screen-Touch-Slider -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
script.js
cody/solygambas/html-css-javascript-projects/053-touch slider/script.js
const slider = document.querySelector(".slider-container"),
slides = Array.from(document.querySelectorAll(".slide"));
let isDragging = false,
startPos = 0,
currentTranslate = 0,
prevTranslate = 0,
animationID = 0,
slides = Array.from(document.querySelectorAll(".slide"));
let isDragging = false,
startPos = 0,
currentTranslate = 0,
prevTranslate = 0,
animationID = 0,